<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>消费商订单</title>
    <link rel="stylesheet" href="assets/css/amazeui.min.css">
    <link rel="stylesheet" href="css/swiper-3.3.1.min.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="css/index/消费商订单.css">
</head>

<body>
    <header>
        <img src="img/z-jiantou.png">
        <span>订单管理</span>
    </header>

    <ul class="order_nav">
        <li class="active">
            <a href="javascript:;">全部</a>
        </li>
        <li>
            <a href="javascript:;">待发货</a>
        </li>
        <li>
            <a href="javascript:;">已发货</a>
        </li>
        <li>
            <a href="javascript:;">已收货</a>
        </li>
    </ul>

    <div id="order_history" class="swiper-container swiper-container-horizontal">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="order_lists">
                    <div class="lists_img">
                        <img src="img/img_left.jpg" alt=""> sdfasdf1545
                    </div>
                    <div class="lists_title">
                        <span>订单号:D1236547879</span>
                        <span>代发货</span>
                    </div>
                    <p class="am-cf"></p>
                    <div class="lists_detail">
                        <ul>
                            <li>
                                <img src="img/img_left.jpg" alt="小食品">
                            </li>
                            <li>
                                <p>糍粑传统营养小食品</p>
                                <p>
                                    阿甘食品店
                                </p>
                                <span>￥29.9</span>
                            </li>
                            <li>
                                <span>×1</span>
                            </li>
                        </ul>
                    </div>
                    <div class="text_right h45">
                        共计1件商品 合计：￥29.9(含运费￥0.00)
                    </div>
                    <div class="bottom_btn h45">
                        <button class="bg-btn" type="button">催单</button>
                        <span class="color_aaa">日期2018-04-18</span>
                    </div>
                </div>
                <div class="order_lists">
                    <div class="lists_img">
                        <img src="img/img_left.jpg" alt=""> sdfasdf1545
                    </div>
                    <div class="lists_title">
                        <span>订单号:D1236547879</span>
                        <span>代付款</span>
                    </div>
                    <p class="am-cf"></p>
                    <div class="lists_detail">
                        <ul>
                            <li>
                                <img src="img/img_left.jpg" alt="小食品">
                            </li>
                            <li>
                                <p>糍粑传统营养小食品</p>
                                <p>
                                    阿甘食品店
                                </p>
                                <span>￥29.9</span>
                            </li>
                            <li>
                                <span>×1</span>
                            </li>
                        </ul>
                    </div>
                    <div class="text_right h45">
                        共计1件商品 合计：￥29.9(含运费￥0.00)
                    </div>
                    <div class="bottom_btn h45">
                        <button class="bg-btn" type="button">查看物流</button>
                        <span class="color_aaa">日期2018-04-18</span>
                    </div>
                </div>
                <div class="order_lists">
                    <div class="lists_img">
                        <img src="img/img_left.jpg" alt=""> sdfasdf1545
                    </div>
                    <div class="lists_title">
                        <span>订单号:D1236547879</span>
                        <span>代付款</span>
                    </div>
                    <p class="am-cf"></p>
                    <div class="lists_detail">
                        <ul>
                            <li>
                                <img src="img/img_left.jpg" alt="小食品">
                            </li>
                            <li>
                                <p>ciba传统营养小食品</p>
                                <p>
                                    阿甘食品店
                                </p>
                                <span>￥29.9</span>
                            </li>
                            <li>
                                <span>×1</span>
                            </li>
                        </ul>
                    </div>
                    <div class="text_right h45">
                        共计1件商品 合计：￥29.9(含运费￥0.00)
                    </div>
                    <div class="bottom_btn h45">
                        <button class="bg-btn" type="button">查看评价</button>
                        <span class="color_aaa">日期2018-04-18</span>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="order_lists">
                    <div class="lists_img">
                        <img src="img/img_left.jpg" alt=""> sdfasdf1545
                    </div>
                    <div class="lists_title">
                        <span>订单号:D1236547879</span>
                        <span>代付款</span>
                    </div>
                    <p class="am-cf"></p>
                    <div class="lists_detail">
                        <ul>
                            <li>
                                <img src="img/img_left.jpg" alt="小食品">
                            </li>
                            <li>
                                <p>ciba传统营养小食品</p>
                                <p>
                                    阿甘食品店
                                </p>
                                <span>￥29.9</span>
                            </li>
                            <li>
                                <span>×1</span>
                            </li>
                        </ul>
                    </div>
                    <div class="text_right h45">
                        共计1件商品 合计：￥29.9(含运费￥0.00)
                    </div>
                    <div class="bottom_btn h45">
                        <button class="bg-btn" type="button">催单</button>
                        <span class="color_aaa">日期2018-04-18</span>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="order_lists">
                    <div class="lists_img">
                        <img src="img/img_left.jpg" alt=""> sdfasdf1545
                    </div>
                    <div class="lists_title">
                        <span>订单号:D1236547879</span>
                        <span>代付款</span>
                    </div>
                    <p class="am-cf"></p>
                    <div class="lists_detail">
                        <ul>
                            <li>
                                <img src="img/img_left.jpg" alt="小食品">
                            </li>
                            <li>
                                <p>糍粑传统营养小食品</p>
                                <p>
                                    阿甘食品店
                                </p>
                                <span>￥29.9</span>
                            </li>
                            <li>
                                <span>×1</span>
                            </li>
                        </ul>
                    </div>
                    <div class="text_right h45">
                        共计1件商品 合计：￥29.9(含运费￥0.00)
                    </div>
                    <div class="bottom_btn h45">
                        <button class="bg-btn" type="button">查看物流</button>
                        <span class="color_aaa">日期2018-04-18</span>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="order_lists">
                    <div class="lists_img">
                        <img src="img/img_left.jpg" alt=""> sdfasdf1545
                    </div>
                    <div class="lists_title">
                        <span>订单号:D1236547879</span>
                        <span>代付款</span>
                    </div>
                    <p class="am-cf"></p>
                    <div class="lists_detail">
                        <ul>
                            <li>
                                <img src="img/img_left.jpg" alt="小食品">
                            </li>
                            <li>
                                <p>ciba传统营养小食品</p>
                                <p>
                                    阿甘食品店
                                </p>
                                <span>￥29.9</span>
                            </li>
                            <li>
                                <span>×1</span>
                            </li>
                        </ul>
                    </div>
                    <div class="text_right h45">
                        共计1件商品 合计：￥29.9(含运费￥0.00)
                    </div>
                    <div class="bottom_btn h45">
                        <button class="bg-btn" type="button">查看评价</button>
                        <span class="color_aaa">日期2018-04-18</span>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <script src="assets/js/jquery.min.js"></script>
    <script src="js/swiper-3.3.1.min.js"></script>
</body>
<script>
    $(function () {
        var navSwiper = new Swiper('#header', {
            freeMode: true,
            slidesPerView: 'auto',
            freeModeSticky: true,
        });
        var tabsSwiper = new Swiper('#order_history', {
            speed: 500,
            onTransitionStart: function (swiper) {
                $(".order_nav .active").removeClass('active');
                $(".order_nav li").eq(swiper.activeIndex).addClass('active');
            }
        })
        $(".order_nav li").on('click', function (e) {
            e.preventDefault()
            $(".order_nav .active").removeClass('active')
            $(this).addClass('active')
            tabsSwiper.slideTo($(this).index())
        })
    })
</script>

</html>